<template>
  <div style="height: 100%;">
    <el-container :style="{height: CONST.WORKSPACE_HEIGHT + 'px'}"
                  style="background-color: #F0F8F8; padding: 30px;width: 100%;">
      <div style="overflow:auto;">
        <div v-for="(termBetweenData, idx) in termBetweenList">
          <div class="nameClass" v-html="termBetweenData.name"></div>
          <div v-for="(propName, prop) in CONST.TERM_STANDARD_PROPERTY" v-if="UTIL.isNotEmpty(termBetweenData[prop])">
            <div class="fieldName">{{ propName }}：</div>
            <div class="name-content" v-html="termBetweenData[prop]"></div>
          </div>
          <div v-if="UTIL.isNotEmpty(termBetweenData.explanation) && termBetweenData.explanation.length > 0">
            <div class="fieldName">释义：</div>
            <div v-for="item in termBetweenData.explanation" v-html="item"></div>
          </div>
          <div>
            <div class="fieldName">来源：</div>
            <div
              v-html="'《' + termBetweenData.nameSource[0].name + '》（' + CONST.TERM_SOURCE[termBetweenData.nameSource[0].category] + '）'"></div>
          </div>
          <hr v-if="idx < termBetweenList.length - 1"/>
        </div>
      </div>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "RelatedBetweenTerm",
  props: {
    relatedTerm: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      termBetweenList: []
    }
  },
  created() {
    this.axios.post("/pmph/action/term/selectRelatedBetweenTerm", this.relatedTerm).then((res) => {
      if (res.data.length == 0) {
        this.$message.info("抱歉，无相关原始术语！");
        return;
      }
      this.termBetweenList = res.data;
    })
  }
}
</script>

<style scoped>
/deep/ .el-scrollbar__wrap {
  overflow: hidden;
}

.inline-block {
  margin-top: 15px;
}

.name-content {
  display: inline-block;
}

.nameClass {
  font-size: 16px;
  font-weight: bold;
}

.fieldName {
  display: inline-block;
  margin-top: 15px;
}

.left {
  margin-left: 60px;
}
</style>
